<template>
	<view class="content">		
		<view v-if="isLoading" class="loadingico" :style="{height: windowHeight + 'px'}">
			<image style="width:50px;height: 50px;" src="../../static/images/loading.gif"></image>
		</view>
		<view v-else>			
			<view class="subject-info">
				<image class="bimg" :src="'https://www.yedushu.cn/' + bookinfo.bimg"></image>
				<view class="bookinfo">
					<text class="bookname" selectable="true" user-select="true">{{bookinfo.book_name}}</text>
					<text class="meta" selectable="true" user-select="true">{{bookinfo.zuozhe}} / {{bookinfo.yizhe}} / {{bookinfo.chubanshe}} / {{bookinfo.yeshu}}页 / {{bookinfo.zhuangzhen}} / {{bookinfo.dingjia}}元 / {{bookinfo.chubannian}} / isbn:{{bookinfo.isbn}} ></text>				
					<view class="readstate">
						<view class="" @click="xiangdu(bookinfo.book_name,bookinfo.book_id,bookinfo.bimg)">
							<view v-if="!isxiangdu" class="readbkc">
								<image class="icopic" src="../../static/images/ic_mark_todo_s.png"></image>
								<text class="readfont">想读</text>
							</view>
							<view v-else class="readbkc">								
								<text class="readfont">已想读</text>
								<image class="arrpic" src="../../static/images/ic_arrow_right.png"></image>
							</view>
						</view>
						<view class="" @click="zaidu(bookinfo.book_name,bookinfo.book_id,bookinfo.bimg)">
							<view v-if="!iszaidu" class="readbkc">
								<image class="icopic" src="../../static/images/ic_mark_doing_s.png"></image>
								<text class="readfont">在读</text>
							</view>
							<view v-else class="readbkc">								
								<text class="readfont">已在读</text>
								<image class="arrpic" src="../../static/images/ic_arrow_right.png"></image>
							</view>
						</view>
						<view class="" @click="duguo(bookinfo.book_name,bookinfo.book_id,bookinfo.bimg)">
							<view v-if="!isduguo" class="readbkc">
								<image class="icopic" src="../../static/images/ic_mark_done_s.png"></image>
								<text class="readfont">读过</text>
							</view>
							<view v-else class="readbkc">								
								<text class="readfont">已读过</text>
								<image class="arrpic" src="../../static/images/ic_arrow_right.png"></image>
							</view>
						</view>
					</view>
				</view>				
			</view>
			<view class="zhuanrang" @click="zhuanrang()" v-if="bags.userscount == 0">			
				<view class="xianzhizr">
					<view class="txt">手里有一本闲着，我要转让</view>
					<image class="zrarrar" src="../../static/images/ic_diary_canforward.png">
				</view>
			</view>
			<view class="zhuanrang" v-else>
				<view class="userscount" @click="usersbooklist()">
					<view class="userinfo">
						<view class="" :style="{transform: `translateX(-${index*15}rpx)`}" v-for="(item, index) in bags.bags" :key="index" v-if="index < 3">
							<image v-if="item.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
							<image v-else class="face" :src="'https://www.yedushu.cn/' + item.users.avatar_file_min">
						</view>
						<view class="txt leftk">有 {{bags.userscount}} 人在转让这本书</view>
					</view>
					<image class="zrarrar" src="../../static/images/ic_diary_canforward.png">
				</view>	
				<view class="xianzhizr" @click="zhuanrang()">
					<view class="txt">手里有一本闲着，我要转让</view>
					<image class="zrarrar" src="../../static/images/ic_diary_canforward.png">
				</view>				
			</view>
			<view class="jieshao" v-if="bookinfo.neirongjianjie != null && bookinfo.neirongjianjie != ''">
				<text class="ht">内容的简介</text>
				<rich-text class="pt" :nodes="bookinfo.neirongjianjie" selectable="true"></rich-text>
			</view>
			<view class="jieshao" v-if="bookinfo.zuozhejianjie != null && bookinfo.zuozhejianjie != ''">
				<text class="ht">作者的简介</text>
				<rich-text class="pt" :nodes="bookinfo.zuozhejianjie" selectable="true"></rich-text>
			</view>
			<view class="jieshao" v-if="bookinfo.mulu != null && bookinfo.mulu != ''">
				<text class="ht">目录的简介</text>
				<rich-text class="pt" :nodes="bookinfo.mulu" selectable="true"></rich-text>
			</view>
			<!-- 微信小程序广告 -->
			<view style="background-color: #FFFFFF;padding-top: 10px;">
				<ad unit-id="adunit-520a4ca513d896f7" ad-intervals="30"></ad>
			</view>
			<view class="msgfooter">
				<view class="tab">
					<view class="tabItem" :class="{'active' : 0 == tab_current}" @click="clickTab(0)">
						<text :class="{'borderline' : 0 == tab_current}">书评</text>
					</view>
					<view class="tabItem" :class="{'active' : 1 == tab_current}" @click="clickTab(1)">
						<text :class="{'borderline' : 1 == tab_current}">读后感</text>
					</view>
					<view class="tabItem" :class="{'active' : 2 == tab_current}" @click="clickTab(2)">
						<text :class="{'borderline' : 2 == tab_current}">书摘</text>
					</view>
				</view>
				<view class="itemcar" v-show="tab_current == 0">
					<!-- 短书评 -->
					<scroll-view class="scroll-y"
						scroll-y = "true"
						:refresher-enabled="refresherenabled"
						:refresher-threshold="50" 
						scroll-anchoring="true"
						:refresher-triggered="refresherTriggered"
						@refresherrefresh="refresherrefresh"
						@refresherrestore="refresherrestore"
						@refresherabort="refresherabort"
						lower-threshold = "50"
						@scrolltolower="scrolltolower"
						@scroll="scroll"
					>
						<view class="noshuping" v-if="duanpinglists == null || duanpinglists == ''">
							<text>暂无书评，</text>
							<view class="xieshuping" @click="xieDuanshuping">写书评</view>
						</view>
						<view class="shuping" v-else>
							<view class="listhead">
								<text class="butxieshuping" @click="xieDuanshuping()">写书评</text>
							</view>
							<view class="item" v-for="(duanpinglist, index) in duanpinglists" :key="index">
								<view class="header">
									<view class="userinfo">										
										<image v-if="duanpinglist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + duanpinglist.users.avatar_file_min"></image>
										<view class="nameinfo">
											<text class="username">{{duanpinglist.users.user_name}}</text>
											<text class="addtime">{{formatDate(duanpinglist.add_time)}}</text>
										</view>
									</view>
									<view>
										<image class="moreico" src="../../static/images/ic_more_s.png"></image>
									</view>
								</view>
								<view class="nrinfo">
									{{duanpinglist.message}}
								</view>
							</view>						
							<view v-if="isLoading" class="isload">加载更多...</view>
							<view v-else class="isend">~~ 我是有底线的 ~~</view>
						</view>
					</scroll-view>
				</view>
				<view class="itemcar" v-show="tab_current == 1">
					<!-- 长书评，读后感 -->
					<scroll-view class="scroll-y"
						scroll-y = "true"
						:refresher-enabled="refresherenabled"
						:refresher-threshold="50" 
						scroll-anchoring="true"
						:refresher-triggered="refresherTriggered"
						@refresherrefresh="refresherrefresh"
						@refresherrestore="refresherrestore"
						@refresherabort="refresherabort"
						lower-threshold = "50"
						@scrolltolower="scrolltolower"
						@scroll="scroll"
					>
						<view class="noduhougan" v-if="changpinglists == null || changpinglists == ''">
							<text>暂无读后感，</text>
							<view class="xieduhougan" @click="xieDuhougan">写读后感</view>
						</view>
						<view class="duhougan" v-else>
							<view class="listhead">
								<text class="butxieduhougan" @click="xieDuhougan()">写读后感</text>
							</view>
							<view class="item" v-for="(changpinglist, index) in changpinglists" :key="index">
								<view class="header">
									<view class="userinfo">
										<image v-if="changpinglist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + changpinglist.users.avatar_file_min"></image>
										<text class="name">{{changpinglist.users.user_name}}</text>
									</view>
									<view class="addtime">{{formatDate(changpinglist.add_time)}}</view>
								</view>
								<view class="article">
									<view class="title">{{changpinglist.title}}</view>
									<view class="neirong">{{changpinglist.bookreview}}</view>
								</view>
							</view>							
							<view v-if="isLoading" class="isload">加载更多...</view>
							<view v-else class="isend">~~ 我是有底线的 ~~</view>
						</view>						
					</scroll-view>
				</view>
				<view class="itemcar" v-show="tab_current == 2">
					<!-- 书摘 -->
					<scroll-view class="scroll-y"
						scroll-y = "true"
						:refresher-enabled="refresherenabled"
						:refresher-threshold="50" 
						scroll-anchoring="true"
						:refresher-triggered="refresherTriggered"
						@refresherrefresh="refresherrefresh"
						@refresherrestore="refresherrestore"
						@refresherabort="refresherabort"
						lower-threshold = "50"
						@scrolltolower="scrolltolower"
						@scroll="scroll"
					>
						<view class="noshuzhai" v-if="shuzhailists == null || shuzhailists == ''">
							<text>暂无书摘，</text>
							<view class="xieshuzhai" @click="xieShuzhai">写书摘</view>
						</view>
						<view class="shuzhai" v-else>
							<view class="listhead">
								<text class="butxieshuzhai" @click="xieShuzhai()">写书摘</text>
							</view>
							<view class="item" v-for="(shuzhailist, index) in shuzhailists" :key="index">
								<view class="header">
									<view class="userinfo">
										<image v-if="shuzhailist.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
										<image v-else class="face" :src="'https://www.yedushu.cn/' + shuzhailist.users.avatar_file_min"></image>
										<view class="nameinfo">
											<text class="username">{{shuzhailist.users.user_name}}</text>
											<text class="addtime">{{formatDate(shuzhailist.add_time)}}</text>
										</view>
									</view>
									<view>
										<image class="moreico" src="../../static/images/ic_more_s.png"></image>
									</view>
								</view>
								<view class="nrinfo">
									<!-- 去除HTML Tag -->
									{{subString((shuzhailist.content).replace(/<\/?[^>]*>/g, ''), 200)}}
								</view>
							</view>
							<view v-if="isLoading" class="isload">加载更多...</view>
							<view v-else class="isend">~~ 我是有底线的 ~~</view>
						</view>						
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import formatDate from '@/components/formatDate/formatDate.js';
	import subString from '@/components/setString/subString.js';
	export default {
		data() {
			return {
				tab_current: 0, // 当前选项卡
				windowHeight: 0, // 可使用窗口高度
				bookinfo: [],
				haslogin: false,
				userinfo: [], // 书籍信息
				bags: '', // 销售相同书籍的近三个会员，和会员总数
				duanpinglists: [], // 短书评列表
				changpinglists: [], // 长书评列表
				shuzhailists: [], // 书摘列表
				index: '', // 书籍列表页面上的索引
				isxiangdu: false,
				iszaidu: false,
				isduguo: false,
				isLoading: false,
				refresherTriggered: false,
				refresherenabled: true,
				windowHeight: '', // 可用窗口高度
			}
		},
		// 发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.bookinfo.book_name + "(夜读书)",
				path: '/pages/books/bookinfo?bookid=' + this.bookinfo.book_id,
				imageUrl: "https://www.yedushu.cn/" + this.bookinfo.bimg
			}
		},
		// 分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.bookinfo.book_name + "(夜读书)",
				imageUrl: "https://www.yedushu.cn/" + this.bookinfo.bimg
			}
		},
		onShow(){
			// 监听评分页面传过来的事件
		    uni.$on("isxiangdu", res => {
		        this.isxiangdu = res.isxiangdu;
				this.iszaidu = res.iszaidu;
				this.isduguo = res.isduguo;
		        // 移除全局自定义事件监听器
		        uni.$off('isxiangdu');
		    });
			uni.$on("iszaidu", res => {
			    this.isxiangdu = res.isxiangdu;
				this.iszaidu = res.iszaidu;
				this.isduguo = res.isduguo;
			    // 移除全局自定义事件监听器
			    uni.$off('iszaidu');
			});
			uni.$on("isduguo", res => {
			    this.isxiangdu = res.isxiangdu;
				this.iszaidu = res.iszaidu;
				this.isduguo = res.isduguo;
			    // 移除全局自定义事件监听器
			    uni.$off('isduguo');
			});
			
			//  -----
			
			// 监听写短书评页面传过来的事件，更新短书评列表
			uni.$on("duanpinglists", res => {
			    this.duanpinglists = res.duanpinglists;
			    // 移除全局自定义事件监听器
			    uni.$off('duanpinglists');
			});
			
			// 监听写长书评页面传过来的事件，更新长书评（读后感）列表
			uni.$on("changpinglists", res => {
			    this.changpinglists = res.changpinglists;
			    // 移除全局自定义事件监听器
			    uni.$off('changpinglists');
			});
			
			// 监听写书摘页面传过来的事件，更新书摘列表
			uni.$on("shuzhailists", res => {
			    this.shuzhailists = res.shuzhailists;
			    // 移除全局自定义事件监听器
			    uni.$off('shuzhailists');
			});
		},
		onLoad: function(option) {			
			this.isLoading = true;
			// console.log(option.bookid);
			
			// 标题显示书籍名字
			// uni.setNavigationBarTitle({
			//     title: option.bookname
			// });
			
			this.index = option.index;
			
			this.haslogin = uni.getStorageSync('haslogin'); // 判断是否登录
			this.userinfo = uni.getStorageSync('userinfo');
			
			// 获得对应的书籍信息的数据
			// this.getBookInfo(option.bookid);			
			
			// 获得设备
			var _this = this;
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.windowHeight);
					_this.windowHeight = res.windowHeight;
			    }
			});
			
			const bookid = option.bookid;			
			Promise.all([this.getBookInfo(bookid), this.getDuanping(bookid), this.getChangping(bookid), this.getShuzhai(bookid), this.getUsers(bookid)]).then((res)=>{
				// console.log(JSON.stringify(res[0]));
				// 书籍信息
				this.bookinfo = res[0];
				if(res[0].readstate != null)
				{
					// 判断是否有读书状态
					if(res[0].readstate.read_state == 1)
					{
						// 已想读
						this.isxiangdu = true;
					}
					if(res[0].readstate.read_state == 2)
					{
						// 已在读
						this.iszaidu = true;
					}
					if(res[0].readstate.read_state == 3)
					{
						// 已读过
						this.isduguo = true;
					}
				}
				
				// 销售相同书籍的近三个会员，和会员总数
				this.bags = res[4];
				// console.log(JSON.stringify(this.bags));
				// console.log(JSON.stringify(this.bags.bags[0].users.avatar_file));
				
				// 短书评列表
				this.duanpinglists = res[1];
				// console.log(JSON.stringify(res[1]));
				
				// 长书评列表
				this.changpinglists = res[2];
				
				// 书摘列表
				this.shuzhailists = res[3];
				// console.log(JSON.stringify(res[3]));
				
				// 显示内容
				this.isLoading = false;
			})
		},
		methods: {
			getBookInfo(bookid) {
				return new Promise((resolve, reject) => {
					uni.request({
					    url: 'https://www.yedushu.cn/api/bookinfo/'+ bookid + '?uid=' + this.userinfo.uid, //书籍信息
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data);
					    }
					});
				});
			},
			getUsers(bookid) {
				// 得到卖本书的会员信息和数量
				return new Promise((resolve, reject) => {
					uni.request({
					    url: 'https://www.yedushu.cn/api/usersbookid?bookid=' + bookid,
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data);
					    }
					});
				});
			},
			usersbooklist() {
				// console.log(this.bookinfo.book_id);
				uni.navigateTo({
				    url: './usersbooklist?bookid=' + this.bookinfo.book_id
				});
			},
			getDuanping(bookid) {
				return new Promise((resolve, reject) => {
					uni.request({
					    url: 'https://www.yedushu.cn/api/bookduanshupinglist/'+ bookid, // 短书评列表
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data.data);
					    }
					});
				});
			},
			getChangping(bookid) {
				return new Promise((resolve, reject) => {
					uni.request({
					    url: 'https://www.yedushu.cn/api/bookchangshupinglist/'+ bookid, // 长书评列表
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data.data);
					    }
					});
				});
			},
			getShuzhai(bookid) {
				return new Promise((resolve, reject) => {
					uni.request({
					    url: 'https://www.yedushu.cn/api/bookshuzhailist/'+ bookid, // 书摘列表
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data.data);
					    }
					});
				});
			},
			formatDate(riqi) {
				// 计算日期
				return formatDate(riqi);
			},
			subString(str, len) {
				// 截取字符串
				return subString(str, len);
			},
			xiangdu(bookname,bookid,bimg) {
				// 设置想读
				if(this.haslogin) {					
					// 已经登录，跳转到书籍评分页面
					uni.navigateTo({
					    url: './bookpingfen?readstate=1&bookname=' + bookname + '&bookid=' + bookid + '&bimg=' + bimg + '&index=' + this.index
					});
				}
				else {
					// 没有登录，跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
			},
			zaidu(bookname,bookid,bimg) {
				// 设置在读
				if(this.haslogin) {
					// 已经登录，跳转到书籍评分页面
					uni.navigateTo({
					    url: './bookpingfen?readstate=2&bookname=' + bookname + '&bookid=' + bookid + '&bimg=' + bimg + '&index=' + this.index
					});
				}
				else {
					// 没有登录，跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
			},
			duguo(bookname,bookid,bimg) {
				// 设置读过
				if(this.haslogin) {
					// 已经登录，跳转到书籍评分页面
					uni.navigateTo({
					    url: './bookpingfen?readstate=3&bookname=' + bookname + '&bookid=' + bookid + '&bimg=' + bimg + '&index=' + this.index
					});
				}
				else {
					// 没有登录，跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
			},
			// 切换tab选项卡
			clickTab(cur){
				this.tab_current = cur;	
			},
			// 写短书评
			xieDuanshuping() {
				if(!this.haslogin) {
					// 没有登录跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
				else {
					// 登录了，跳转到写短书评页面
					// console.log(JSON.stringify(this.bookinfo.book_id));
					uni.navigateTo({
					    url: './xieshuping?bookid=' + this.bookinfo.book_id
					});
				}
			},
			// 写读后感
			xieDuhougan() {
				if(!this.haslogin) {
					// 没有登录跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
				else {
					// 登录了，跳转到写读后感页面
					uni.navigateTo({
					    url: './xieduhougan?bookid=' + this.bookinfo.book_id
					});
				}
			},
			// 写书摘
			xieShuzhai() {
				if(!this.haslogin) {
					// 没有登录跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
				else {
					// 登录了，跳转到写书摘页面
					uni.navigateTo({
					    url: './xieshuzhai?bookid=' + this.bookinfo.book_id
					});
				}
			},
			// 转让闲置书籍
			zhuanrang() {
				if(!this.haslogin) {
					// 没有登录跳转到登录页面
					uni.navigateTo({
					    url: '../login/login'
					});
				}
				else {
					// 登录了，跳转到写书摘页面
					uni.navigateTo({
					    url: './zhuanrang?bookid=' + this.bookinfo.book_id + '&bookname=' + this.bookinfo.book_name + '&zuozhe=' + this.bookinfo.zuozhe + '&isbn=' + this.bookinfo.isbn
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.loadingico {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.subject-info {
		display: flex;
		flex-direction: row;
		padding: 10px 10px;
	}
	.bookinfo {
		display: flex;		
		flex: 2;
		flex-direction: column;
		padding-left: 8px;
	}
	.meta {
		font-size: 12px;
		color: #494949;
		padding: 5px 0;
		padding-right: 5px;
	}
	.bookname {
		font-size: 20px;
		font-weight: 700;
	}
	.bimg {
		width: 90px;
		height: 130px;
		border-radius: 3px;
	}
	.readstate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.readstate .readbkc {
		background-color: #F4F4F4;
		padding: 5px 10px;
		border-radius: 5px;
		display: flex;
		align-items: center;
	}
	.readstate .readbkc .readfont {
		font-size: 13px;
	}
	.readstate .readbkc .icopic {
		width: 16px;
		height: 16px;
		padding-right: 5px;
	}
	.readstate .readbkc .arrpic {
		width: 6px;
		height: 10px;
		padding-left: 5px;
	}
	.jieshao {
		display: flex;
		flex-direction: column;
		padding-top: 20px;
		padding: 10px 10px;
	}
	.ht {
		color: #aaa;
		margin: 0 0 15px;
		font-size: 15px;
		font-weight: normal;
	}
	.pt {
		font-size: 16px;
		color: #494949;
		line-height: 26px;
		word-wrap: break-word;
		margin: 0;
	}
	.msgfooter .tab{
	    width: 100%;
		padding-top: 15px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		border-bottom: 1px solid #f3f3f3;
		/* position: fixed; */
		/* z-index: 100; */
		background-color: #F4F4F4;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	.msgfooter .tabItem{
	    width: 100%;
	    height: 25px;
	    line-height: 25px;
	    font-size: 15px;
	    text-align: center;
	    color: #666666;
		border-bottom: 1px #e0e0e0 solid;
	}
	.msgfooter .scroll-y {
		background-color: #F4F4F4;
	}
	.msgfooter .active{		
	    color: #000000;
	}
	.msgfooter .borderline {
		border-bottom: 2px solid #808080;
	}
	.msgfooter .shuping .item .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15px 10px;
	}
	.msgfooter .shuping .item {
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}
	.msgfooter .shuping .item .header .face{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	.msgfooter .shuping .item .userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.msgfooter .shuping .item .userinfo .nameinfo {
		display: flex;
		flex-direction: column;
		padding-left: 10px;
	}
	.msgfooter .shuping .item .userinfo .nameinfo  .username {
		font-size: 12px;
	}
	.msgfooter .shuping .item .userinfo .nameinfo  .addtime {
		font-size: 10px;
	}
	.msgfooter .shuping .item .header .moreico {
		width: 15px;
		height: 15px;
	}
	.msgfooter .shuping .item .nrinfo {
		padding: 0 10px 15px 10px;
		font-size: 15px;
		line-height: 20px;
	}
	.msgfooter .duhougan .item {		
		background-color: #FFFFFF;
		margin-bottom: 10px;
		padding: 15px 10px;
	}
	.msgfooter .duhougan .item .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.msgfooter .duhougan .item .userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.msgfooter .duhougan .item .face {
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	.msgfooter .duhougan .item .userinfo .name {
		font-size: 14px;
		padding-left: 10px;
	}
	.msgfooter .duhougan .item .addtime {
		font-size: 14px;
	}
	.msgfooter .duhougan .item .article {
		padding: 10px 0; 
	}
	.msgfooter .duhougan .item .article .title {
		font-size: 15px;
		font-weight: 600;
	}
	.msgfooter .duhougan .item .article .neirong {
		font-size: 14px;
		line-height: 20px;
	}
	.msgfooter .shuzhai .item .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 15px 10px;
	}
	.msgfooter .shuzhai .item {
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}
	.msgfooter .shuzhai .item .header .face{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	.msgfooter .shuzhai .item .userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.msgfooter .shuzhai .item .userinfo .nameinfo {
		display: flex;
		flex-direction: column;
		padding-left: 10px;
	}
	.msgfooter .shuzhai .item .userinfo .nameinfo  .username {
		font-size: 12px;
	}
	.msgfooter .shuzhai .item .userinfo .nameinfo  .addtime {
		font-size: 10px;
	}
	.msgfooter .shuzhai .item .header .moreico {
		width: 15px;
		height: 15px;
	}
	.msgfooter .shuzhai .item .nrinfo {
		padding: 0 10px 15px 10px;
		font-size: 15px;
		line-height: 20px;
	}
	.noshuping {
		display: flex;
		padding: 30px 0;
		justify-content: center;
		align-items: center;
		font-size: 15px;
	}
	.noduhougan {
		display: flex;
		padding: 30px 0;
		justify-content: center;
		align-items: center;
		font-size: 15px;
	}
	.noshuzhai {
		display: flex;
		padding: 30px 0;
		justify-content: center;
		align-items: center;
		font-size: 15px;
	}
	.isend {
		padding: 10px 0;
		display: flex;
		justify-content: center;
		font-size: 15px;
	}
	.xieshuping {
		color: #00CC33;
	}
	.xieduhougan {
		color: #00CC33;
	}
	.xieshuzhai {
		color: #00CC33;
	}
	.listhead {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding: 10px 10px;
		background-color: #f5f5f5;
	}
	.butxieshuping {
		font-size: 13px;
		background-color: #dedede;
		padding: 5px 5px;
		border-radius: 5px;
	}
	.butxieduhougan {
		font-size: 13px;
		background-color: #dedede;
		padding: 5px 5px;
		border-radius: 5px;
	}
	.butxieshuzhai {
		font-size: 13px;
		background-color: #dedede;
		padding: 5px 5px;
		border-radius: 5px;
	}
	.zhuanrang {
		background-color: #F4F4F4;
		padding: 5px 10px;
		border-radius: 5px;
		margin: 0 10px;
	}
	.zhuanrang .txt {
		font-size: 15px;
		line-height: 25px;
		padding: 10px 0;
	}
	.zhuanrang .leftk {
		padding-left: 2px;
	}
	.zhuanrang .face {
		width: 26px;
		height: 26px;
		border-radius: 50px;
		border: solid 1px #FFFFFF;
	}
	.zhuanrang .userscount {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;		
		border-bottom: 1px solid #E8E8E8;
	}
	.zhuanrang .userscount .userinfo {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.zhuanrang .zrarrar {
		width: 12px;
		height: 12px;
	}
	.zhuanrang .xianzhizr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
</style>
